<template>
	<div v-if="pageShow">
		<el-row
			style="
				height: 8vh;
				display: flex;
				align-items: center;
				box-shadow: 0 1px 25px black;
				background: linear-gradient(to right, white, whitesmoke);
			"
		>
			<el-col :span="2" :offset="4">
				<div id="site-name" class="vanishIn">Amadeus</div>
			</el-col>
			<el-col :span="1" :offset="3">
				<div class="hvr-underline-from-center" style="height: 21px">
					<el-link
						:underline="false"
						@click="toIndex"
						style="font-size: 16px"
						>首页</el-link
					>
				</div>
			</el-col>
			<el-col :span="1" :offset="1" v-for="linkItem in linkMsg">
				<div class="hvr-underline-from-center" style="height: 21px">
					<el-link
						:underline="false"
						@click="linkItem.linkMethod"
						style="font-size: 16px"
						>{{ linkItem.linkName }}</el-link
					>
				</div>
			</el-col>
			<el-col :span="1" :offset="3">
				<el-popover
					width="12vw"
					:offset="8"
					placement="bottom"
					@show="popShow"
					@hide="popHide"
					:show-arrow="false"
					v-if="loginState"
				>
					<template #reference>
						<div style="height: 40px; width: 40px">
							<Transition
								leave-active-class="holeOut"
								enter-active-class="spaceInUp"
							>
								<el-avatar
									:size="40"
									:src="userData.avatar"
									v-if="userAvatarShow"
								/>
							</Transition>
							<div
								v-if="!userAvatarShow"
								style="height: 40px; width: 40px"
							></div>
						</div>
					</template>
					<div style="height: 28vh; width: 100%; position: relative">
						<div
							style="
								width: 100%;
								display: flex;
								align-items: center;
								flex-direction: column;
							"
							class="boingInUp"
						>
							<div id="pop-user-avatar">
								<el-avatar
									:size="70"
									:src="userData.avatar"
									class="hvr-grow-shadow"
									@click="router.push('/aboutMe')"
								/>
							</div>
							<div style="margin-bottom: 5vh"></div>
							<div>
								<div
									style="
										font-size: 20px;
										font-weight: bold;
										text-shadow: 0 0 5px rgb(147, 224, 255);
										color: rgb(255, 66, 93);
									"
								>
									{{ userData.nickname }}
								</div>
							</div>
							<div style="margin-top: 1vh">
								<typeWriter
									:msg="userData.notes"
									id="typeWriter"
								></typeWriter>
							</div>
							<div
								style="
									display: flex;
									align-items: center;
									justify-content: space-between;
									width: 80%;
									margin-top: 3.5vh;
								"
							>
								<div style="font-size: 10px; font-weight: bold">
									{{ blogNum }}
								</div>
								<div style="font-size: 10px; font-weight: bold">
									{{ categoryNum }}
								</div>
								<div style="font-size: 10px; font-weight: bold">
									{{ followList.length }}
								</div>
								<div style="font-size: 10px; font-weight: bold">
									{{ fansList.length }}
								</div>
							</div>
							<div
								style="
									display: flex;
									align-items: center;
									justify-content: space-between;
									width: 95%;
								"
							>
								<div style="display: flex; align-items: center">
									<el-icon :size="12">
										<Comment />
									</el-icon>
									<div style="font-size: 12px">博客</div>
								</div>
								<div style="display: flex; align-items: center">
									<el-icon :size="12">
										<StarFilled />
									</el-icon>
									<div style="font-size: 12px">分类</div>
								</div>
								<div style="display: flex; align-items: center">
									<el-icon :size="12">
										<UserFilled />
									</el-icon>
									<div style="font-size: 12px">关注</div>
								</div>
								<div style="display: flex; align-items: center">
									<el-icon :size="12">
										<Avatar />
									</el-icon>
									<div style="font-size: 12px">粉丝</div>
								</div>
							</div>

							<div style="margin-top: 4vh">
								<el-button type="danger" plain @click="quitUser"
									>退出登录</el-button
								>
							</div>
						</div>
					</div>
				</el-popover>
				<el-tooltip
					v-else
					class="box-item"
					effect="dark"
					content="点我跳转至登录"
					placement="bottom-end"
				>
					<el-avatar
						:size="50"
						style="user-select: none"
						@click="toLogin"
						class="hvr-shrink"
						>未登录</el-avatar
					>
				</el-tooltip>
			</el-col>
		</el-row>

		<el-row style="margin-bottom: 3vh">
			<el-col :span="24" style="position: relative">
				<el-image
					fit="cover"
					:src="getFile.getAssetsFile('img', '导航栏下图片.png')"
					style="width: 100%; height: 15vh; opacity: 0.7"
				/>
				<div
					style="
						width: 100%;
						height: 15vh;
						background: linear-gradient(
							to bottom,
							rgba(255, 255, 255, 0),
							rgba(255, 255, 255, 1)
						);
						position: absolute;
						top: 0;
						left: 0;
					"
				></div>
			</el-col>
		</el-row>
	</div>
	<div v-else style="display: flex; justify-content: center">
		<el-skeleton :rows="5" animated style="width: 90vw" />
	</div>
</template>

<script setup>
import { onBeforeMount, toRefs } from 'vue';
import getFile from '../utils/getAssetsFile';
import { user } from '../store/user.js';
import { blog } from '../store/blog.js';
import {
	Comment,
	StarFilled,
	UserFilled,
	Avatar,
} from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
const router = useRouter();
const blogStore = blog();
const userStore = user();
const toIndex = () => {
	router.push('/');
};
let loginState = ref('');
let userData = ref({});
let userAvatarShow = ref(true);
let blogMsg = ref('');
let blogNum = ref(0);
let categoryNum = ref(0);
const followList = ref(null);
const fansList = ref(null);
const pageShow = ref(false);

const toLogin = () => {
	router.push('/login');
};

const popShow = () => {
	userAvatarShow.value = false;
};
const popHide = () => {
	userAvatarShow.value = true;
};

const quitUser = () => {
	localStorage.clear();
	router.push('/');
};

const props = defineProps({
	linkMsg: {
		default: [
			{
				linkName: '文章',
				linkMethod: () => {
					useRouter().push('/article');
				},
			},
			{
				linkName: '发现',
				linkMethod: () => {
					useRouter().push('/discover');
				},
			},
			{
				linkName: '留言板',
				linkMethod: () => {
					useRouter().push('/board');
				},
			},
		],
	},
});
let { linkMsg } = toRefs(props);

onBeforeMount(async () => {
	let username = localStorage.getItem('username');
	if (!username) {
		ElNotification({
			title: 'Warning',
			message: '您还没有登录哦！',
			type: 'warning',
		});
	}
	if (username) {
		userData.value = await userStore.getSpecifyUserMsg(username);
		if (userData.value !== 'error') {
			loginState.value = true;
			if (
				!userData.value.nickname ||
				userData.value.nickname === 'null'
			) {
				userData.value.nickname = `新用户${userData.value.id}号`;
			}
			if (!userData.value.avatar || userData.value.avatar === 'null') {
				userData.value.avatar = getFile.getAssetsFile(
					'img',
					'未登录头像.png'
				);
			}
			if (!userData.value.notes || userData.value.notes === 'null') {
				userData.value.notes = '这个人很懒...';
			}
		} else {
			loginState.value = false;
		}
		blogMsg.value = await blogStore.getUserBlog(username);
		if (blogMsg.value !== 'none' && blogMsg.value !== 'error') {
			let categoryArr = [];
			for (let i of blogMsg.value) {
				blogNum.value++;
				categoryArr.push(i.category);
			}
			categoryArr = [...new Set(categoryArr)];
			categoryNum.value = categoryArr.length;
		}

		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserFollow',
				method: 'post',
				data: {
					username: localStorage.getItem('username'),
				},
			});
			if (res.data.state === 'error') {
				ElNotification({
					title: 'Error',
					message: '服务器错误',
					type: 'error',
				});
			} else {
				followList.value = res.data.data;
			}
		} catch (error) {
			console.log(error);
			ElNotification({
				title: 'Error',
				message: '请检查本地网络',
				type: 'error',
			});
		}
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/getUserBeingFollow',
				method: 'post',
				data: {
					userType: localStorage.getItem('usertype'),
					id: Number(localStorage.getItem('id')),
				},
			});
			if (res.data.state === 'error') {
				ElNotification({
					title: 'Error',
					message: '服务器错误',
					type: 'error',
				});
			} else {
				fansList.value = res.data.data;
			}
		} catch (error) {
			console.log(error);
			ElNotification({
				title: 'Error',
				message: '请检查本地网络',
				type: 'error',
			});
		}
	} else {
		loginState.value = false;
	}
	pageShow.value = true;
});
</script>

<style scoped>
#site-name {
	font-size: 30px;
	animation-duration: 2s;
	animation-delay: 0;
	color: rgb(241, 74, 45);
	font-weight: bold;
	user-select: none;
}
.holeOut,
.spaceInUp {
	animation-duration: 1s;
}
.boingInUp {
	animation-duration: 1s;
}

#pop-user-avatar {
	position: absolute;
	top: -5vh;
	margin-bottom: 5vh;
}
#typeWriter {
	margin-top: 1vh;
}
</style>
